<template>
    <div class='login container'>
        <Header>
            <span>注册</span>
        </Header>
        <section>
            <div class='ipt tel'>
                <input type="text" pattern="[0-9]*" placeholder="请输入手机号" v-model='userTel'>
            </div>
            <div class='ipt code'>
                <input type="text" pattern="[0-9]*" placeholder="请输入短信验证码" v-model='userCode'>
                <button @click='sendCode' :disabled="disable">{{ codeMsg }}</button>
            </div>
            <div class='ipt tel'>
                <input type="text" placeholder="设置密码" v-model='userPwd'>
            </div>
            <div class='login-btn' @click='register'>注册</div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from './Header'
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js'
export default{
    data () {
        return {
            userTel:'',//用户输入的手机号
            userCode:'',//用户输入的验证码
            userPwd:'',//用户输入密码
            codeMsg:'获取短信验证码',//倒计时按钮的文字
            disable:false,//验证码倒计时按钮是否可用
            codeNum:10,//倒计时，时间
            rules:{//判断规则
                userTel:{
                    ruls:/^1[3456789]\d{9}$/,
                    msg:'请输入11位有效手机号'
                },
                userCode:{
                    ruls:/^\d{4}$/,
                    msg:'请输入有效验证码'
                },
                userPwd:{
                    ruls:/^\w{6,12}$/,
                    msg:'请输入6-12位密码'
                }
            },
            telCode:''
        }
    },
    components:{
        Header,
        Tabbar
    },
    methods:{
        //发送短信验证码
        sendCode(){
           
            if(  !this.validate( 'userTel' )  ) return;
            this.disable = true;
            let timer = setInterval(()=>{
                --this.codeNum;
                this.codeMsg = `重新发送(${this.codeNum})`
            },1000);
            
            setTimeout(()=>{
                clearInterval(timer);
                this.codeMsg = '获取短信验证码';
                this.disable = false;
                this.codeNum = 10;
            },10000)
            
            //发送请求 ===>  手机获取验证码
            http.$axios(  {
            	url:'/api/code',
                method:'post',
                data:{
                    tel:this.userTel
                }
            }).then(res=>{
                if( !res.success ) return;
                this.telCode = res.data;
            })
        },
        //点击登录
        register(){
            //用户输入的验证码格式对不对
            if(  !this.validate( 'userCode' )  ) return;
            if(  !this.validate( 'userPwd' )  ) return;
           
            //相等 【用户输入的】【手机发送】
            if( this.telCode == this.userCode ){
               
                http.$axios(  {
                    url:'/api/register',
                    method:'post',
                    data:{
                       tel:this.userTel,
                       pwd:this.userPwd
                    }
                }).then(res=>{
                   Toast( res.msg );
                   if( res.success ){
                       console.log( res.data );
                       //跳转到my路由
                   }
                })
                
            }
           
        },
        //验证判断条件
        validate( params ){
             let bool = true;
             //如果输入格式不正确,提示信息
             if( !this.rules[params].ruls.test( this[params] )  ){
                 Toast(this.rules[params].msg);
                 bool=false;
                 return bool;
             }
             return bool;
        }
    }
}
</script>

<style scoped lang='scss'>
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:0.8rem 0.4rem;
    font-size:0.373333rem;
    background-color: #f5f5f5;
    .ipt{
        margin:0.266666rem 0;
        width: 8.933333rem;
        height: 1.173333rem;
        input{
            box-sizing: border-box;
            padding:0 0.266666rem;
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            border-radius: 6px;
        }
    }
    .code{
        position:relative;
        button{
            position: absolute;
            right:0;
            height: 1.173333rem;
            padding:0 0.266666rem;
            color:#fff;
            background-color: #b0352f;
            border: none;
            outline: 0;
            border-radius: 6px;
        }
    }
    .login-btn{
        width: 8.933333rem;
        margin-top:0.266666rem;
        line-height: 1.2rem;
        color:#fff;
        text-align: center;
        background-color: #b0352f;
        border-radius: 6px;
    }
}
::v-deep .tabbar{
   border-top:2px solid #ccc;
}
</style>